<template>
  <div>
    <div v-html="richtextValue.content" class="blm-richText" @click="clickSup"></div>
    <BlmSourceDetail
      :visible="sourceDetailVisible"
      @update:visible="sourceDetailVisible = $event"
      :sourceData="sourceData"
    />
  </div>
</template>
<script>
import BlmSourceDetail from "./BlmSourceDetail.vue";
export default {
  props: {
    richtextValue: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  components: {
    BlmSourceDetail
  },
  data() {
    return {
      sourceData: null,
      sourceDetailVisible: false
    };
  },
  methods: {
    clickSup(e) {
      if (e.target.getAttribute("type") === "dataTrace") {
        this.jumpLink(e.target.getAttribute("key"));
      } else {
        return;
      }
    },
    jumpLink(index) {
      const jums = this.richtextValue.traceData.filter(
        item => item.index + "" === index + ""
      );
      if (jums[0] && jums[0].url) {
        window.open(jums[0].url);
      } else {
        this.openSourceDetail(jums[0]);
      }
    },
    openSourceDetail(sourceData) {
      if (sourceData.jump_type === "data_query") {
        this.sourceData = sourceData;
      } else {
        this.sourceData = this.richtextValue.traceData.filter(
          item => item.jump_type !== "data_query"
        );
      }

      this.sourceDetailVisible = true;
    }
  }
};
</script>
<style scoped lang="less">
@import (once) "@/styles/variable.less";
.blm-richText {
  background-color: @white-color-1;
  padding: 6px @padding10;
  padding-top: 10px;
  white-space: normal;
  text-align: left;
  font-size: 16px;
   line-height: 25px;
}
.blm-richText-arr {
  white-space: normal;
}
.sup-text {
  background: @black-color-a-10;
  font-size: 12px;
  padding: 2px;
  margin: 0 4px;
  height: 16px;
  color: #007df0;
  border-radius: 2px;
}
</style>
<style lang="less">
@import (once) "@/styles/variable.less";
.blm-richText {
  table {
    width: max-content;
    margin-bottom: 12px;
    border-collapse: collapse;
    overflow: auto;
    th {
      border-bottom: 1px solid @white-color-7;
      border-top: 1px solid @white-color-7;
      padding: 8px 2px;
    }
    td {
      border-bottom: 1px solid @white-color-7;
      padding: 6px 2px;
    }
  }
}
.blm-richText {
  ol,
  ul {
    margin: 0;
    padding-left: 20px;
    font-size: 0;
    line-height: 130%;
  }
  li {
    padding: 0;
    margin: 0;
    list-style: auto;
    line-height: 126%;
    font-size: 14px;
     line-height: 25px;
  }
  .sup-text {
    background: @black-color-a-10;
    font-size: 12px;
    padding: 2px;
    margin: 0 4px;
    height: 16px;
    color: #136dff;
    border-radius: 2px;
    vertical-align: text-top;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    padding: 0;
    font-size: initial;
    font-weight: bolder;
  }
}
.blm-richText ol li {
  list-style: decimal;
}
.blm-richText ul li {
  list-style-type: disc;
  
}
.blm-richText li{
  font-size: 16px;
  line-height: 25px;
}
.blm-richText code {
  text-align: justify;
  padding: 10px;
  border-radius: 6px;
  display: block;
  font-size: 14px;
  background-color: #f3f4fb;
  color: @black-color-4;
  white-space: break-spaces;
}
</style>